<template>
  <div class="home">
    <van-nav-bar
      title="录入信息"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <van-form validate-first @submit="onSubmit">
      <div block type="info" class="get-area" @click="testNfc">
        刷卡读取身份证信息
      </div>
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        input-align="right"
        label="姓名"
        required
        v-model="formData.name"
        name="pattern"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <van-field
        input-align="right"
        label="性别"
        required
        v-model="formData.sex"
        name="pattern"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        input-align="right"
        label="证件类型"
        required
        v-model="formData.card_type"
        name="pattern"
        placeholder="请选择证件类型"
        @focus="showCertificate = true"
        :rules="[{ required: true, message: '请选择证件类型' }]"
      />
      <van-field
        input-align="right"
        :label="label"
        required
        v-model="formData.card_no"
        name="pattern"
        placeholder="请输入身份证号"
        :rules="[{ required: true, message: '请输入正确内容' }]"
        maxlength="18"
      />
      <van-field
        input-align="right"
        label="出生日期"
        required
        @focus="
          showDate = true
          showDateNum = 1
        "
        v-model="formData.bithday"
        name="pattern"
        placeholder="请输入出生日期 例:1975/08/21"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        input-align="right"
        label="户口所在地"
        required
        v-model="formData.registered_residence"
        name="pattern"
        placeholder="请输入户口所在地"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        input-align="right"
        label="联系方式"
        required
        v-model="formData.mobile"
        name="phoneRules"
        placeholder="请输入联系方式"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        input-align="right"
        label="目的地"
        v-model="formData.end_addr"
        name="pattern"
        placeholder="请输入详细目的地"
      />
      <van-field
        input-align="right"
        label="出发港口"
        v-model="formData.start_port"
        name="pattern"
        placeholder="请输入出发港口"
      />
      <van-field
        input-align="right"
        label="出发日期"
        required
        @focus="
          showDate = true
          showDateNum = 2
        "
        v-model="formData.start_date"
        name="pattern"
        placeholder="请输入出发日期"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        input-align="right"
        label="船次号"
        v-model="formData.at_num"
        name="pattern"
        placeholder="请输入船次号"
      />
      <van-field
        input-align="right"
        label="船仓号"
        v-model="formData.cabin_num"
        name="pattern"
        placeholder="请输入船仓号"
      />
      <van-field
        input-align="right"
        label="抵达港口"
        v-model="formData.arrived_port"
        name="pattern"
        placeholder="请输入抵达港口"
      />
      <van-field
        input-align="right"
        label="车辆类型"
        v-model="formData.car_type"
        name="pattern"
        placeholder="请输入车辆类型"
      />
      <van-field
        input-align="right"
        label="车辆信息"
        v-model="formData.car_info"
        name="pattern"
        placeholder="请输入车辆信息"
      />

      <div style="margin: 16px;display:flex;">
        <van-button block type="info" native-type="submit">确认</van-button>
      </div>
    </van-form>
    <!-- 证件类型 -->
    <van-popup v-model="showCertificate" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showCertificate = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 日期 -->
    <van-popup v-model="showDate" round position="bottom">
      <van-datetime-picker
        @confirm="getConfirm"
        @cancel="showDate = false"
        :min-date="minDate"
        type="date"
        title="选择年月日"
      />
    </van-popup>
  </div>
</template>

<script>
import { addPortInfo } from '@/api/gov/home'
import { Toast, Dialog } from 'vant'
export default {
  data() {
    return {
      minDate: new Date(1900, 0, 1),
      showDate: false, // 选择生日
      label: '身份证号',
      columns: ['身份证', '护照', '军官证', '港澳通行证'],
      formData: {
        card_type: '', // 证件类型
        name: '', // 姓名
        card_no: '', // 身份证
        sex: '', // 性别
        mobile: '',
        bithday: '', // 出生日期
        registered_residence: '', // 户口
        start_port: '', // 出发港口
        start_date: '', // 出发日期
        at_num: '', // 船次号
        cabin_num: '', // 船仓号
        arrived_port: '', // 抵达港口
        car_info: '', // 车辆信息
        car_type: '', // 车辆类型
        end_addr: '', // 目的地
        enter_type: ''
      },
      pickerShow: false, // 时间选择
      showCertificate: false, // 证件类型
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    }
  },
  mounted() {
    this.formData.enter_type = this.$route.query.id
    window['getNfcData'] = row => {
      let r = JSON.parse(row)
      console.log(r, 'NFC识别后的参数')
      Toast.clear()
      // if (!r.id) return Toast.fail('nfc读取失败')

      for (let i in this.formData) {
        this.formData[i] = ''
      }

      this.formData.enter_type = this.$route.query.id
      this.formData.name = r.name || ''
      this.formData.card_no = r.id || ''
      this.formData.sex = r.sex || ''
      r.birthday = r.birthday.replace('年', '-')
      r.birthday = r.birthday.replace('月', '-')
      r.birthday = r.birthday.replace('日', '')
      this.formData.bithday = r.birthday || ''
      this.formData.registered_residence = r.address || ''
      this.formData.card_type = '身份证'
    }
  },
  methods: {
    getConfirm(value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()

      if (this.showDateNum == 2) {
        this.formData.start_date = yy + '-' + mm + '-' + dd
      } else {
        this.formData.bithday = yy + '-' + mm + '-' + dd
      }

      this.showDate = false
    },
    onConfirm(value) {
      this.label = value
      this.formData.card_type = value
      this.showCertificate = false
    },

    testNfc() {
      // 测试用户终端
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {
        Toast.loading({
          message: '正在识别...',
          forbidClick: true,
          duration: 20000
        })
        window.Android.useNFCReadIdCard('123')
      }
      if (isiOS) {
        return Toast.fail('抱歉\n暂不支持ios')
      }
    },
    onSubmit() {
      let formdata = JSON.parse(JSON.stringify(this.formData))

      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 10000
      })
      addPortInfo(formdata).then(res => {
        Toast.clear()
        if (res.data.errcode === 0) {
          Dialog.alert({
            message: '提交成功',
            showCancelButton: false,
            showConfirmButton: false
          }).then(() => {})
          const TIMEOUT = setTimeout(() => {
            Dialog.close()
            clearTimeout(TIMEOUT)
          }, 2000)
          // 提交成功清空数据
          for (let i in this.formData) {
            this.formData[i] = ''
          }
        } else {
          Toast.fail(res.data.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  img {
    width: 100%;
  }
  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }
  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label {
    width: 8em;
  }
  /deep/.van-field__error-message {
    text-align: right;
  }
  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item {
      margin: 10px;
    }
  }
}
.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
</style>
